<!DOCTYPE html>
<html lang="zh">
  <head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>砺锋智慧健康系统</title>
    <meta content="砺锋智慧健康系统" name="description">
    <meta content="砺锋智慧健康系统" name="keywords">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
          name="viewport">
    <!-- 引入样式 -->
    <link href="../static/plugins/elementui/index.css" rel="stylesheet">
    <link href="../static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/orderset.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/plugins/elementui/index.js"></script>
    <script src="../static/js/jquery.min.js" type="text/javascript"></script>
    <script src="../static/js/axios-0.27.2.js"></script>
  </head>
  <body class="hold-transition">
    <div id="app">
      <div class="content-header">
        <h1>预约管理<small>预约设置</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>预约管理</el-breadcrumb-item>
          <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="app-container">
        <div class="box">
          <div class="box ordersetting">
            <el-card class="box-card">
              <div class="boxMain">
                <el-button @click="downloadTemplate()" style="margin-bottom: 20px;margin-right: 20px"
                           type="primary">模板下载
                </el-button>
                <el-upload :before-upload="beforeUpload"
                           :on-success="handleSuccess"
                           :show-file-list="false"
                           action="/ordersetting/upload"
                           name="excelFile">
                  <el-button type="primary">上传文件</el-button>
                </el-upload>
              </div>
              <div>
                操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
              </div>
            </el-card>
            <div class="calendar">
              <!-- 年份 月份 -->
              <div class="month">
                <div class="currentdate">
                  <span class="choose-year">{{ currentYear }}年</span>
                  <span class="choose-month">{{ currentMonth }}月</span>
                </div>
                <div class="choose">
                  <span @click="goCurrentMonth(currentYear,currentMonth)"
                        class="gotoday">今天</span>
                  <span @click="pickPre(currentYear,currentMonth)">❮</span>
                  <span @click="pickNext(currentYear,currentMonth)">❯</span>
                </div>
                <div class="clearfix"></div>
              </div>
              <!-- 星期 -->
              <div class="caldate">
                <ul class="weekdays">
                  <li>周一</li>
                  <li>周二</li>
                  <li>周三</li>
                  <li>周四</li>
                  <li>周五</li>
                  <li>周六</li>
                  <li>周日</li>
                </ul>
                <!-- 日期 -->
                <ul class="days">
                  <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                  <li v-for="dayobject in days">
                    <template>
                      <!-- 非当前月份 -->
                      <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                        {{ dayobject.day.getDate() }}
                      </div>
                      <!-- 当前月 -->
                      <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                        <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                        <!-- 使用 VUE 的 v-for 标签遍历上面的 leftobj 模型数据，展示到日历上 -->
                        <template>
                          <template v-for="obj in leftobj">
                            <template
                                v-if="new Date(obj.orderDate).getDate() == dayobject.day.getDate()">

                              <template v-if="obj.number > obj.reservations">
                                <div class="usual">
                                  <p>可预约{{obj.number}}人</p>
                                  <p>已预约{{obj.reservations}}人</p>
                                </div>
                              </template>
                              <template v-else>
                                <div class="fulled">
                                  <p>可预约{{obj.number}}人</p>
                                  <p>已预约{{obj.reservations}}人</p>
                                  <p>已满</p>
                                </div>
                              </template>
                            </template>
                          </template>
                          <!-- 为日历中的设置按钮绑定单击事件，当前日期作为参数 -->
                          <button @click="handleOrderSet(dayobject.day)"
                                  class="orderbtn" v-if="dayobject.day > today"></button>
                        </template>

                      </div>
                    </template>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- 引入组件库 -->
  <script src="../static/js/vue.js"></script>
  <script src="../static/plugins/elementui/index.js"></script>
  <script src="../static/js/jquery.min.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        today: new Date(),//当前日期
        currentDay: 1,
        currentMonth: 1,
        LocalMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
      },
      created: function () {//在vue初始化时调用
        this.initData(null);
      },
      methods: {
        // 预约设置
        handleOrderSet(day) {
          // alert(day);
          this.$prompt('请输入可预约人数', '预约设置', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[0-9]*[1-9][0-9]*$/,
            inputErrorMessage: '只能输入正整数'
          }).then(({value}) => {
            axios.post("/ordersetting/editNumberByDate",
                {
                  orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate()),
                  number: value
                })
            .then((res) => {
              if (res.data.flag) {
                this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                this.$message.success(res.data.message);
              } else {
                this.$message.error(res.data.message);
              }
            });
          }).catch(() => {
            this.$message.info("取消输入");
            // this.$message({
            //     type: 'info',
            //     message: '已取消'
            // });
          });
        },

        // 下载模板文件
        downloadTemplate() {
          window.location.href = "../static/attached/ordersetting_template.xlsx";
        },

        // 上传之前进行文件格式校验
        beforeUpload(file) {
          const isXLS = file.type === 'application/vnd.ms-excel';
          if (isXLS) {
            return true;
          }
          const isXLSX = file.type
              === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          if (isXLSX) {
            return true;
          }
          this.$message.error("上传文件只能是xls或xlsx格式！");
          return false;
        },

        // 上传成功提示
        handleSuccess(response, file) {
          if (response.flag) {
            this.$message.success(response.message);
            this.initData(null);
          } else {
            this.$message.error(response.message);
          }
        },
        // 初始化当前页要展示的日期
        initData: function (cur) {
          var date;
          var index = 0;   //控制显示预定的天数
          if (cur) {
            date = new Date(cur);
          } else {
            var now = new Date();
            var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
            d.setDate(35);
            date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
          }
          this.currentDay = date.getDate();
          this.currentYear = date.getFullYear();
          this.currentMonth = date.getMonth() + 1;
          this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
          var today = new Date();
          this.LocalMonth = today.getMonth() + 1;
          if (this.currentWeek == 0) {
            this.currentWeek = 7;
          }
          var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
          this.days.length = 0;
          // 今天是周日，放在第一行第7个位置，前面6个
          // 初始化本周
          for (var i = this.currentWeek - 1; i >= 0; i--) {
            var d = new Date(str);
            d.setDate(d.getDate() - i);
            var dayobject = {};
            dayobject.day = d;
            var now = new Date();
            if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth()
                && d.getFullYear() === now.getFullYear()) {
              dayobject.index = index++;//从今天开始显示供预定的数量
            } else if (index != 0 && index < 3) {
              dayobject.index = index++;
            }//从今天开始3天内显示供预定的数量
            this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
          }
          //其他周
          for (var i = 1; i <= 35 - this.currentWeek; i++) {
            var d = new Date(str);
            d.setDate(d.getDate() + i);
            var dayobject = {};//dayobject   {day:date,index:2}
            dayobject.day = d;
            var now = new Date();
            if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth()
                && d.getFullYear() === now.getFullYear()) {
              dayobject.index = index++;
            } else if (index != 0 && index < 3) {
              dayobject.index = index++;
            }
            this.days.push(dayobject);
          }

          // this.leftobj = [
          //     {date: 1, number: 120, reservations: 1},
          //     {date: 3, number: 120, reservations: 1},
          //     {date: 4, number: 120, reservations: 120},
          //     {date: 6, number: 120, reservations: 1},
          //     {date: 8, number: 120, reservations: 1}
          // ];

          // 发送ajax请求，根据当前页面对应的月份查询数据库，封装成相应结果赋值给leftobj模型数据，用于页面展示
          axios.post("/ordersetting/getOrderSettingByMonth?date=" + this.currentYear + "-"
              + this.currentMonth).then((res) => {
            if (res.data.flag) {
              this.leftobj = res.data.data;
              console.log(this.leftobj)
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //切换到当前月份
        goCurrentMonth: function (year, month) {
          var d = new Date();
          this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        },
        //向前一个月
        pickPre: function (year, month) {
          // setDate(0); 上月最后一天
          // setDate(-1); 上月倒数第二天
          // setDate(dx) 参数dx为 上月最后一天的前后dx天
          var d = new Date(this.formatDate(year, month, 1));
          d.setDate(0);
          this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        },
        //向后一个月
        pickNext: function (year, month) {
          var d = new Date(this.formatDate(year, month, 1));
          d.setDate(35);////获取指定天之后的日期
          this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        },
        // 返回 类似 2016-01-02 格式的字符串
        formatDate: function (year, month, day) {
          var y = year;
          var m = month;
          if (m < 10) {
            m = "0" + m;
          }
          var d = day;
          if (d < 10) {
            d = "0" + d;
          }
          return y + "-" + m + "-" + d
        }
      }
    })
  </script>
</html>
